<template>
	<view>
		<view class="select-box f-row-Hcenter f-row-between">
			<sun-dropDown style="width: 90%;" :onSubmitAddress="onSubmitAddress"></sun-dropDown>
			<view class="shaixuan icons iconshaixuanguolv" @click="open(['slide-right'])"></view>
		</view>
		<view class="dates-box f-column-Wcenter">
			<view style="width: 100%;" class="dates f-row-between">
				<view
					class="date f-center" 
					:style="{ width: 100 / 5 - 3 + '%' }"
					:class="selected == 'd' ? 'selected' : ''"
					@click="selected = 'd'"
				>
					今日
				</view>
				<view
					class="date f-center"
					:style="{ width: 100 / 5 - 3 + '%' }"
					:class="selected == 'zr' ? 'selected' : ''"
					@click="selected = 'zr'"
				>
					昨日
				</view>
				<view
					class="date f-center"
					:style="{ width: 100 / 5 - 3 + '%' }"
					:class="selected == 'z' ? 'selected' : ''"
					@click="selected = 'z'"
				>
					本周
				</view>
				<view
					class="date f-center"
					:style="{ width: 100 / 5 - 3 + '%' }"
					:class="selected == 'm' ? 'selected' : ''"
					@click="selected = 'm'"
				>
					本月
				</view>
				<view
					class="date f-center"
					:style="{ width: 100 / 5 - 1.5 + '%' }"
					:class="selected == 'zdy' ? 'selected' : ''"
					@click="selected = 'zdy'"
				>
					自定义
				</view>
			</view>
			<sun-Dates  :selected="selected" :showDate="true" @onSubmit="onSubmitDate"></sun-Dates>
		</view>
		<view class="tietle-box">
			<sun-tietleBox :tietleData="'单据列表'" :showLine="false">
				<view class="f-row-Hcenter">
					<label>合计：</label>
					<label style="font-size: 20upx;">￥</label>
					<label>{{ resData.appsale.appsalerec.real_amt.numder }}</label>
					<label>{{ resData.appsale.appsalerec.real_amt.unit }}</label>
				</view>
			</sun-tietleBox>
		</view>
		<view :id="idTopHeight" class="table-box " :style="{ padding: 0 + ' ' + tableMargin + 'rpx' }">
			<!-- 撑满屏幕 -->
			<view :id="idTopHeight" class="list-box" :style="{ height: topHeight + 'rpx', maxHeight: topHeight - tableMargin * 2 + 'rpx' }">
				<scroll-view
					:scroll-top="scrollTop"
					:scroll-y="true"
					class="scroll-Y"
					:style="{ height: topHeight + 'rpx', maxHeight: topHeight - tableMargin * 2 + 'rpx' }"
					@scrolltolower="lower"
				>
					<view class="appsale-item" v-for="(item, index) in resData.appsale.list" :key="index">
						<view class="top f-row-between f-row-Hcenter">
							<view class=" f-column">
								<view class="line f-row-Hcenter">
									<label>单号：</label>
									<label>{{ item.sheet_no }}</label>
								</view>
								<view class="line f-row-Hcenter">
									<label>收银员：</label>
									<label>{{ item.oper_name }}</label>
								</view>
							</view>
							<view class=" f-column">
								<view class="line f-row-Hcenter">
									<label></label>
									<label>{{ item.sheet_type }}</label>
								</view>
								<view class="line f-row-Hcenter">
									<label>￥</label>
									<label>{{ item.real_amt | toFIex}}</label>
								</view>
							</view>
						</view>
						<view class="bottom f-row-between f-row-Hcenter">
							<view class="lfet f-row-Hcenter">
								<label>时间：</label>
								<label>{{ item.oper_date | yyyy_MM_dd }}</label>
							</view>
							<view class="right f-center " @click="toPage(item)">
								<label class="det vertical-align: text-bottom">单据详情</label>
								<view class="icons iconarrow-right f-row-Hcenter vertical-align: text-bottom"></view>
							</view>
						</view>
					</view>
					<view class="toastTitle">{{ query.toastTitle }}</view>
				</scroll-view>
			</view>
		</view>
		<!-- 遮罩 -->
		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="show" />
		<!-- 过渡 -->
		<uni-transition :duration="200" :mode-class="modeClass" :styles="transfromClass" :show="transShow" @change="change">
			<view class="transfromClass-box">
				<view class="money-block">
					<view class="money-item" :class="item.selected ? 'selected' : ''" v-for="(item, index) in resData.appsale.dataType" :index="index" @click="onTap(item, index)">
						{{ item.oper_name }}
					</view>
				</view>
				<view style="width: 100%;" class="btn-Block f-center">
					<view class="btn-left f-center" @click="onCancelAppsale">取消</view>
					<view class="btn-right f-center" @click="onSubmitAppsale">确定</view>
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
import sunDropDown from '@/components/sun-dropDown/sun-dropDown.vue';
import sunDates from '@/components/sun-Dates/sun-Dates.vue';
import wybTable from '@/components/wyb-table/wyb-table.vue';
import sunTietleBox from '@/components/sun-titleBox/sun-tietleBox.vue';
import api_server from '@/api/api_server.js';
export default {
	components: {
		wybTable,
		sunDates,
		sunDropDown,
		sunTietleBox
	},
	data() {
		return {
			selected : 'd',
			//遮罩
			show: false,
			transShow: false,
			modeClass: ['fade'],
			maskClass: {
				position: 'fixed',
				bottom: 0,
				top: 0,
				left: 0,
				right: 0,
				'background-color': 'rgba(0, 0, 0, 0.4)'
			},
			transfromClass: {
				position: 'fixed',
				bottom: 0,
				top: 0,
				left: 0,
				right: 0,
				/* #ifndef APP-NVUE */
				display: 'flex',
				/* #endif */
				'justify-content': 'center'
				// 'align-items': 'center'
			},
			scrollTop: 0,
			//表格高度变量
			idTopHeight: 'table-box',
			tableMargin: 20,
			topHeight: 100,
			//平分表宽
			defaultColWidth: 167,

			//数据
			resData: {
				appsale: {
					appsalerec: {
						real_amt:{
							numder : 0
						}
						
					},
					dataType: [
					],
					dataType1: [
						{
							oper_name: '全部'
						}
					],
					list: []
				}
			},
			//查询
			query: {
				branch_jg: '', //机构 支持%为全部机构
				start_date: 10000000,
				end_date: 10000000,
				oper_no: '%', // varchar(4) 收银员 默认传%表示全部
				ischange: true, // 是 bool 请求参数是否修改，如果为false证明文档中的参数没修改，就不查询count，反之查询新的count

				pageindex: 1, // 是 int 页号
				pagesize: 5, // 是 int 页大小 如果想一次性查询全部时，此参传入999999
				toastTitle: '',
				totalPage: 1 //总页码(前端算)
			},

			page: '/pages/collectFlow/collectFlowDet',
			//选中的临时操作员
			tmpItemAppsale: {}
		};
	},
	onReady() {
	},
	computed: {
		userInfo() {
			let userInfo = this.$store.getters.getUserInfo;
			userInfo.wxUser = userInfo.wxUser ? userInfo.wxUser : {};
			return userInfo;
		}
	},
	methods: {
		//确认/取消操作员
		onCancelAppsale() {
			this.transShow = this.show = false;
		},
		onSubmitAppsale() {
			let tmpItem = this.tmpItemAppsale;
			this.transShow = this.show = false;
			delete this.query.oper_no;
			this.query.oper_no = tmpItem.oper_id || '%';
			this.query.oper_name = tmpItem.oper_name;
			this.query.pageindex = 1;

			this.getlogin();
		},
		open(mode) {
			this.show = true;
			this.modeClass = mode;
			this.transShow = !this.transShow;
		},
		onTap(item, index) {
			this.tmpItemAppsale = item;
			this.resData.appsale.dataType.forEach(item => {
				item.selected = false;
			});
			this.resData.appsale.dataType[index].selected = true;
		},
		change(e) {
			console.log(e.detail);
		},
		toPage(item) {
			this.$util.navigateTo({
				url: '/pages/collectFlow/collectFlowDet?sheet_no=' + item.sheet_no
			});
		},
		// 下拉刷新
		lower: function(e) {
			this.query.pageindex++;
			console.log(e);
			if (this.query.pageindex > this.query.totalPage) {
				return;
			}
			this.query.toastTitle = '加载中...';

			this.getlogin('more');
		},
		//选择分店
		onSubmitAddress(e) {
			this.query.branch_jg = e.address.branch_no;
			this.query.branch_name = e.address.branch_name;
			this.getAppSaleFlowOperList();
			this.getlogin();
		},
		onSubmitDate(e) {
			this.query = { ...this.query, ...e };
			this.getAppSaleFlowOperList();
			this.getlogin();
		},
		getAppSaleFlowOperList() {
			this.$api_server.dwzy_GetAppSaleFlowOperList({
				data: this.query,
				success: res => {
					if (res.data) {
						this.resData.appsale.dataType = [...this.resData.appsale.dataType1, ...res.data.data];
					}
				}
			});
		},
		getlogin(isMore) {
			if (this.query.branch_jg == '') {
				this.query.branch_name = this.userInfo.branch_name;
				this.query.branch_jg = this.userInfo.branch_default;
			}

			let query = this.query;
			query = {
				Params: query
			};

			this.$api_server.dwzy_GetAppSaleFlowAnalysis({
				data: query,
				success: res => {
					if (res.data) {
						let query = this.query;
						//收银合计
						let appsalerec = res.data.data.appsalerec;
						for (let key in appsalerec) {
							if (appsalerec[key]) {
								this.resData.appsale.appsalerec[key] = { ...this.resData.appsale.appsalerec[key], ...this.$util.moneyUnit(appsalerec[key]) };
							}
						}
						if (query.pageindex == 1) {
							this.resData.appsale.list = res.data.data.appsalelist;
						} else {
							this.resData.appsale.list = [...this.resData.appsale.list, ...res.data.data.appsalelist];
						}
						this.$util.getTopHeight(this, this.idTopHeight, this.tableMargin,'topHeight');

						let listlength = this.resData.appsale.list.length;
						let totalCount = appsalerec.rec_tot;

						query.totalPage = Math.ceil(totalCount / query.pagesize);

						if (listlength > 0) {
							if (listlength <= totalCount && query.pageindex >= query.totalPage) {
								query.toastTitle = '没有更多了!';
							} else {
								query.toastTitle = '加载更多...';
							}
						} else {
							query.toastTitle = '没有更多了!';
						}
					}
				},
				fail(error) {
					console.log('rerror>>>', error);
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
@charset "UTF-8";

.uni-padding-wrap {
	margin-top: 20upx;
	padding: 0px 30upx;
}

.select-box {
	padding: 0 20upx;
	.shaixuan {
		margin-left: 10upx;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
		font-size: 45upx;
		padding: 10upx;
	}
}



.tietle-box {
	margin: 0 20upx;
}

.dates-box {
	margin: 0 20upx;
	padding: 20upx;
	background-color: #fcfdfd;
	padding: 20upx 30upx 20upx 30upx;
	border-radius: 15upx;
	background-color: rgba($color: #ffffff, $alpha: 1);
	.uni-margin-wrap {
		margin: 20upx;
		// background-color: #0A98D5;
		.swiper {
			height: 30upx;
			min-width: 300upx;
		}
	}

	.dates {
		width: 520upx;
	}

	.date {
		width: 120upx;

		padding: 0 15upx;
		height: 51upx;
		border: 1upx solid #d7d7d7;
		border-radius: 100upx;

		font-size: 30upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
	}
}

.toastTitle {
	width: 100%;
	text-align: center;
	color: rgba(216, 216, 216, 0.9);
}
.transfromClass-box {
	width: 90%;
	border-radius: 10upx;
	margin-top: 10upx;
	padding: 20upx;
	background: rgba(255, 255, 255, 1);
	display: inline-table;
	.selected {
		background: rgba(85, 170, 127, 0.9);
		color: rgba(255, 255, 255, 0.9);
	}
	.money-item {
		box-sizing: border-box;
		height: 60upx;
		line-height: 60upx;
		border-radius: 20upx;
		padding: 0 10upx;
		margin: 10upx;
		border: 1px solid rgba(162, 162, 184, 0.9);
		display: inline-block;
	}
	.btn-Block {
		border: 0px;
		width: 100%;
		padding: 20upx;
		.btn-left {
			width: 250upx;
			height: 80upx;
			border-radius: 10upx;
			color: rgba(0, 189, 0, 0.8);
			background-color: rgba(170, 255, 255, 1);
			background-image: linear-gradient(to top right, rgba(241, 240, 240, 1), rgba(238, 238, 238, 1));
			margin-right: 30upx;
		}

		.btn-right {
			width: 250upx;
			height: 80upx;
			border-radius: 10upx;
			color: rgba(255, 255, 250, 1);
			background-color: rgba(195, 195, 0, 1);
			background-image: linear-gradient(to top right, rgba(0, 180, 0, 0.8), rgba(0, 188, 0, 0.8));
		}
	}
}
.table-box {
	.appsale-item {
		padding: 20upx;
		margin: 10upx 0;
		border-radius: 15upx;
		background: rgba(255, 255, 255, 1);
		.top {
			.line {
				label {
					&:nth-of-type(1) {
						width: 130upx;
						white-space: nowrap;
						text-align: right;
					}
					&:nth-of-type(2) {
						text-align: left;
						white-space: nowrap;
					}
				}
			}
		}
		.bottom {
			margin-top: 10upx;
			padding-top: 10upx;
			border-top: 1px solid rgba(225, 225, 225, 0.9);
			.lfet {
				label {
					&:nth-of-type(1) {
						width: 130upx;
						text-align: right;
					}
				}
			}
			.det {
				&:nth-of-type(1) {
					font-size: 26upx;
					line-height: 28upx;
					color: rgba(170, 170, 255, 1);
				}
			}
			.right {
				.iconarrow-right {
					margin-left: 10upx;
					color: rgba(170, 170, 255, 1);
					font-size: 22upx;
					line-height: 28upx;
				}
			}
		}
	}
}
</style>
